import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const Demo1SceneCube: React.FC = () => {
  const mountRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mountRef.current) return;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0a0a);

    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 1.6, 4);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    mountRef.current.appendChild(renderer.domElement);

    // 环境光
    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambient);

    // 主方向光
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
    dirLight.position.set(5, 10, 7);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize.set(2048, 2048);
    scene.add(dirLight);

    // 补光
    const fillLight = new THREE.DirectionalLight(0x88ccff, 0.3);
    fillLight.position.set(-5, 3, -3);
    scene.add(fillLight);

    // 地面
    const groundGeo = new THREE.PlaneGeometry(20, 20);
    const groundMat = new THREE.MeshStandardMaterial({ color: 0x222222 });
    const ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // 数字人组
    const avatarGroup = new THREE.Group();
    scene.add(avatarGroup);

    // 头部
    const headGeo = new THREE.SphereGeometry(0.25, 32, 32);
    const headMat = new THREE.MeshStandardMaterial({
      color: 0xffdbac,
      roughness: 0.6,
      metalness: 0.1,
    });
    const head = new THREE.Mesh(headGeo, headMat);
    head.position.y = 1.6;
    head.castShadow = true;
    avatarGroup.add(head);

    // 眼睛
    const eyeGeo = new THREE.SphereGeometry(0.04, 16, 16);
    const eyeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
    const leftEye = new THREE.Mesh(eyeGeo, eyeMat);
    leftEye.position.set(-0.08, 1.65, 0.22);
    avatarGroup.add(leftEye);
    const rightEye = new THREE.Mesh(eyeGeo, eyeMat);
    rightEye.position.set(0.08, 1.65, 0.22);
    avatarGroup.add(rightEye);

    // 身体
    const bodyGeo = new THREE.CapsuleGeometry(0.3, 0.9, 4, 16);
    const bodyMat = new THREE.MeshStandardMaterial({
      color: 0x2563eb,
      roughness: 0.5,
      metalness: 0.2,
    });
    const body = new THREE.Mesh(bodyGeo, bodyMat);
    body.position.y = 0.9;
    body.castShadow = true;
    avatarGroup.add(body);

    // 手臂
    const armGeo = new THREE.CapsuleGeometry(0.08, 0.6, 4, 8);
    const armMat = new THREE.MeshStandardMaterial({ color: 0xffdbac });
    const leftArm = new THREE.Mesh(armGeo, armMat);
    leftArm.position.set(-0.45, 1.1, 0);
    leftArm.rotation.z = 0.3;
    leftArm.castShadow = true;
    avatarGroup.add(leftArm);

    const rightArm = new THREE.Mesh(armGeo, armMat);
    rightArm.position.set(0.45, 1.1, 0);
    rightArm.rotation.z = -0.3;
    rightArm.castShadow = true;
    avatarGroup.add(rightArm);

    // 腿部
    const legGeo = new THREE.CapsuleGeometry(0.1, 0.7, 4, 8);
    const legMat = new THREE.MeshStandardMaterial({ color: 0x1e40af });
    const leftLeg = new THREE.Mesh(legGeo, legMat);
    leftLeg.position.set(-0.15, 0.35, 0);
    leftLeg.castShadow = true;
    avatarGroup.add(leftLeg);

    const rightLeg = new THREE.Mesh(legGeo, legMat);
    rightLeg.position.set(0.15, 0.35, 0);
    rightLeg.castShadow = true;
    avatarGroup.add(rightLeg);

    // 简单口型动画（模拟说话）
    let talkTime = 0;
    const mouthGeo = new THREE.SphereGeometry(0.06, 8, 4, 0, Math.PI);
    const mouthMat = new THREE.MeshBasicMaterial({ color: 0x8b0000 });
    const mouth = new THREE.Mesh(mouthGeo, mouthMat);
    mouth.position.set(0, 1.55, 0.24);
    mouth.rotation.x = Math.PI;
    avatarGroup.add(mouth);

    // 鼠标交互：看向鼠标
    const mouse = new THREE.Vector2();
    const onMouseMove = (e: MouseEvent) => {
      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    };
    window.addEventListener('mousemove', onMouseMove);

    const clock = new THREE.Clock();

    const animate = () => {
      requestAnimationFrame(animate);
      const t = clock.getElapsedTime();

      // 身体轻微浮动
      avatarGroup.position.y = Math.sin(t * 0.8) * 0.02;

      // 头部跟随鼠标
      const targetRotY = mouse.x * 0.4;
      const targetRotX = mouse.y * 0.3;
      head.rotation.y += (targetRotY - head.rotation.y) * 0.05;
      head.rotation.x += (targetRotX - head.rotation.x) * 0.05;

      // 口型动画
      talkTime += 0.1;
      const s = 1 + Math.sin(talkTime * 5) * 0.2;
      mouth.scale.set(1, s, 1);

      // 手臂轻微摆动
      leftArm.rotation.x = Math.sin(t * 2) * 0.1;
      rightArm.rotation.x = -Math.sin(t * 2) * 0.1;

      renderer.render(scene, camera);
    };
    animate();

    const onResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };
    window.addEventListener('resize', onResize);

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('resize', onResize);
      if (mountRef.current && renderer.domElement) {
        mountRef.current.removeChild(renderer.domElement);
      }
      renderer.dispose();
    };
  }, []);

  return <div ref={mountRef} style={{ width: '100%', height: '100vh' }} />;
};

export default Demo1SceneCube;
